<template>
  <el-table :data="dataList" :v-loading="isLoading"
            border style="width: 100%" class="workorder-table"
            @expand-change="markdown2Html">
    <el-table-column type="expand" fixed="" class="ccccc">
      <template slot-scope="props">
        <div class="el-col-14" >
          <el-alert title="工单内容."
                    show-icon type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
          <div v-html="props.row.order_contents" class="md-container markdown-body"></div>
        </div>
        <div class="el-col-9 el-col-offset-1">
          <el-alert title="处理回复."
                    show-icon type="info" :closable="false" style="margin-bottom: 10px"></el-alert>
          <div v-if="props.row.result_desc?true:false"
               v-html="props.row.result_desc"
               class="md-container markdown-body"></div>
          <div v-else class="md-container"> 暂无处理描述 </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column sortable align="center" prop="id" label="ID"></el-table-column>
    <el-table-column sortable align="center" min-width="120" prop="title" label="标题"></el-table-column>
    <el-table-column sortable align="center" min-width="100" prop="type.name" label="类型"></el-table-column>
    <el-table-column sortable align="center" min-width="100" prop="applicant.name" label="申请人"></el-table-column>
    <el-table-column sortable align="center" min-width="110" prop="group.name" label="接收组"></el-table-column>
    <el-table-column sortable align="center" min-width="100" prop="assign_to.name" label="指派人"></el-table-column>
    <el-table-column sortable align="center" min-width="100" prop="final_processor.name" label="处理人"></el-table-column>
    <el-table-column sortable align="center" min-width="100" prop="status.id" label="状态"
                     :filters="status" :filter-method="filterStatus" filter-placement="bottom-end">
      <template slot-scope="scope" >
            <span v-for="s in status">
              <span v-show="scope.row.status.id===s.value">
                <el-tag :type="s.color"
                        disable-transitions>{{ scope.row.status.name }}</el-tag>
                </span>
            </span>
      </template>
    </el-table-column>
    <el-table-column sortable align="center" width="160" prop="apply_time" label="申请时间"></el-table-column>
    <el-table-column v-if="history" sortable align="center" width="160" prop="complete_time" label="完成时间"></el-table-column>
    <el-table-column v-if="history?false:true" align="center" fixed="right" label="操作" width="120">
      <template slot-scope="scope">
        <el-button size="mini" type="text" v-if="scope.row.status.id===0?true:false" @click="handleAccept(scope.row)">接受</el-button>
        <el-button size="mini" type="text" v-if="scope.row.status.id===1?true:false" @click="handleClick(scope.row)">处理</el-button>
        <el-button size="mini" type="text" v-if="scope.row.status.id<2?true:false" @click="handleCancel(scope.row)">放弃</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    name: 'workorder-table',

    props: {
      dataList: {
        required: true,
        type: Array
      },
      status: {
        required: true,
        type: Array
      },
      isLoading: {
        required: true,
        type: Boolean
      },
      history: {
        required: true,
        type: Boolean
      }
    },
    data() {
      return {
      }
    },
    methods: {
      filterStatus(value, row) {
        return row.status.id === value
      },
      handleAccept(row) {
        this.$emit('accept', row)
      },
      handleCancel(row) {
        this.$emit('cancel', row)
      },
      handleClick(row) {
        this.$emit('handle', row)
      },
      markdown2Html(row, expandedRows) { // 展开行将转换显示
        import('showdown').then(showdown => {
          const converter = new showdown.Converter()
          // ghCompatibleHeaderId 生成github风格的标签选择器
          converter.setOption('ghCompatibleHeaderId', 'true')
          converter.setOption('ghCodeBlocks', 'true')
          row.order_contents = converter.makeHtml(row.order_contents)
          if (row.result_desc) {
            row.result_desc = converter.makeHtml(row.result_desc)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~github-markdown-css';
  .workorder-table {
    .ccccc {
      .el-table__expanded-cell{
        padding: 20px;
      }
    }
  }
  .md-container {
    padding: 5px;
  }
</style>
